<template>
  <div id="app">
    <div class="header">
      <div class="top">
        <div class="left">
          <h3><nut-icon @click="back" name="left"></nut-icon></h3>
        </div>
        <div class="right"><h3>乘客列表</h3></div>
      </div>
      <div class="bottom" style="color: white; font-size: 20px">
        <nut-icon name="people" style="font-size: 30px"></nut-icon>&emsp;lalune
      </div>
    </div>
    <div class="button">
      <button>+新增乘客</button>
    </div>
    <div class="main">
      <div class="box" v-for="(v, i) in datas" :key="i">
        <div class="one"><nut-icon name="share"></nut-icon></div>
        <div class="two">
          <div class="twoTop" style="display: flex">
            <h4>{{ v.booker }}</h4>
            &emsp;
            <div
              style="
                border: 1px solid green;
                font-size: 12px;
                height: 20px;
                margin-top: 5px;
                line-height: 20px;
                color: green;
              "
            >
              {{ v.ticketType }}
            </div>
          </div>
          <div class="twoBottom">
            <span>身份证:{{ v.idCard }}</span>
          </div>
        </div>
        <div class="there">
          <input type="checkbox" name="" class="checked_c" ref="checkeds" id="" />
        </div>
      </div>
    </div>
    <div style="width:100%;height:50px;">
    </div>
    <button class="msgbtn" @click="msgbtnfun()">提交</button>
  </div>
</template>

<script  lang="ts">
import { api } from "../../api/api";
import { reactive, ref, toRefs } from "vue";
// passengers
export default {
  setup() {
    // 返回上一页
    function back() {
      history.go(-1);
    }
    const state = reactive({
      checkeds: ref(),
      alldatas:[]
    })

    // 获取数据
    const datas = reactive([]);
    api.passengers.gener().catch((err) => {
      console.log(err);
      Object.assign(datas, err.data);
    });
    const msgbtnfun = () => {
      state.checkeds.forEach((res: { checked: any; },id: any) => {
        if(res.checked==true){
          state.alldatas.push(datas[id])
        }
        
      });
      localStorage.setItem('msgdata',JSON.stringify(state.alldatas))
      history.go(-1);
    }
    return {
      // 返回上一页
      back,
      datas,
      ...toRefs(state),
      msgbtnfun
    };
  },
};
</script>

<style lang="scss" scoped>
.header {
  background: #1ba9ba;
  height: 120px;
}
.top {
  display: flex;
  color: white;
  height: 40px;
  line-height: 40px;
  .left {
    margin-left: 2%;
  }
  .right {
    flex: 1;
    text-align: center;
  }
}
.bottom {
  width: 84%;
  margin-left: 8%;
  height: 60px;
  line-height: 60px;
}
.button {
  width: 94%;
  margin-left: 3%;
  height: 60px;
  button {
    width: 100%;
    height: 40px;
    background: white;
    border: none;
    border-radius: 5px;
    margin-top: 3%;
    color: green;
  }
}
.main {
  width: 94%;
  margin-left: 3%;
  .box {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #ccc;
    background: white;
    display: flex;
    justify-content: space-evenly;
    .one {
      line-height: 60px;
    }
    .two {
      line-height: 30px;
    }
    .there {
      line-height: 60px;
    }
  }
}
.msgbtn{
  position: fixed;
  bottom: 0;
  width: 96%;
  margin-left: 2%;
  height: 40px;
  border-radius: 25px;
  border: 0;
  background: #1ba9ba;
  color: white;
}
</style>